<template>
  <div class="hello">
    <h1>子组件1</h1>
    <h5>(父子组件单独通信)</h5>
    <h4>收到：{{msg}}</h4>
    <h4>传递：<input type="text" v-model="childMsg"><button @click="sendToFather">点击传递</button></h4>
    <h4> Vuex演示：userName:{{this.$store.state.userName}}</h4>
    <h4>输入要修改的userName <input type="text" v-model="newName"></h4>
    <button @click="updateByMutation">更改state中的username</button>
  </div>
</template>

<script>
export default {
  name: 'HelloSon',
  data(){
    return{
      childMsg:'To父组件 我在玩游戏',
      newName:''
    }
  },
  props:{
    msg:String
  },
  methods:{
    // 在Vue中，emit设计采用了发布订阅模式。
    // 一个发布者$emit发布一个事件到信号中心 eventBus 。
    // 子组件可以使用 $emit,让父组件监听到自定义事件 。
    sendToFather(){
      // 点击发送 父组件监听自定义 out 事件
      this.$emit("out",this.childMsg)
    },
    // 更改 state中的数据 直接调用mutations
    updateByMutation(){
      this.$store.commit("SET_NAME",this.newName)
    }
  }
}
</script>
<style scoped lang="scss">
.hello {
  background-color: aquamarine;
}
</style>